<template>
  <div class="tree-item">
    <div class="left">
      <i v-if="isroot" class="el-icon-s-home" />
      <span class="name" :class="{ blod: isroot }">{{ item.name }}</span>
    </div>
    <div class="right">
      <span class="manager">{{ item.manager }}</span>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <el-dropdown-item
            v-if="!isroot"
            command="view"
          >查看部门</el-dropdown-item>
          <el-dropdown-item
            v-if="!isroot"
            command="del"
          >删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { delDeptAPI } from '@/api/department'
export default {
  props: {
    item: {
      type: Object,
      // 基本类型的默认值是直接给
      // 复杂类型的默认值是要给一个函数，再return默认值
      default() {
        return {
          id: '',
          name: '江苏传智播客教育科技股份有限公司',
          manager: '负责人'
        }
      }
    },

    // 用来标记是否在顶层
    isroot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    async handleCommand(cmd) {
      // 根据被点的每一项不同做不同的处理
      switch (cmd) {
        case 'add':
          // 这里做新增子部门
          this.$emit('add', this.item.id)
          break
        case 'view':
          // 这里做查看部门（修改）
          this.$emit('view', this.item.id)
          break
        case 'del':
          try {
            await this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
              type: 'warning'
            })
            // 弹出确认框
            // 这里做删除
            await delDeptAPI(this.item.id)
            // 刷新数据
            this.$emit('del')
          } catch {
            console.log('取消了')
          }
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-item {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .blod {
    font-weight: 700;
  }
  .right {
    font-size: 14px;
    .manager {
      margin-right: 30px;
    }
  }
}
</style>
